<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>用户管理</title>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="/static/css/style1.css" />

	<link rel="stylesheet" type="text/css"
		  href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/js/bootbox.min.js"></script>
	<style>
		.page {
			font-family: Arial, "楷体";
			font-size: 15px;
			line-height: 26px;
			color: #000000;
			height: 40px;
			margin-top: -15px;
			background-color: #EEF6FF;
			margin-right: 0;
		}

		.page td {
			padding-right: 10px;
			padding-left: 10px;
		}

		.page select {
			font-family: Arial, "楷体";
			font-size: 12px;
			color: #000000;
			line-height: 18px;
			border: 1.5px solid #5084BB;
		}
	</style>
</head>
<body>
<div class="box">
	<!-- 		<div class="title">后台管理用户信息表</div> -->
	<div class="content">
		<!--搜索输入框及查询、重置按钮-->
		<div class="container content_width">
			<div class="person_search">
				<div class="search_input">
					<div class="input-group mb-3">
						<span>用户名：</span> <input id="Ktext" type="text" name="Ktext"
												 class="form-control" placeholder="请输入用户名" value="${param.username}">
					</div>
				</div>
				<div class="search_input">
					<div class="input-group mb-3" >
						<span>手机号：</span> <input id="Ktext2" type="text" name="Ktext" style="color: #3ea2ee" value="${param.phone}"
												class="form-control" placeholder="请输入手机号">
					</div>
				</div>
				<div class="search_input">

					<button class="btn btn-primary search_btn" type="button"
							id="search_btn" onclick="onSelectByNamePhone()">查询</button>

					<button class="btn btn-primary search_btn" type="button"
							id="back_btn">重置</button>
				</div>
			</div>
			<div class="line"></div>
		</div>
		<!--添加按钮及bootstrap的模态框-->
		<div class="export">
			<button id="new_add" type="button" class="btn btn-primary btn-sm"
					data-toggle="modal" data-target="#renyuan">
				<img src="/static/img/add_two.png" /> <span>添加</span>
			</button>
			<div class="modal fade" id="renyuan">
				<div class="modal-dialog modal-lg modal_position">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">添加</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
						<form id="form1" name="form1" action="/user/saveUser" method="post" enctype="application/x-www-form-urlencoded">
							<div class="modal-body">
								<table id="xztb" class="table" >
									<!--新修改弹窗的样式-->
									<tbody>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>用户名</label></td>
										<td><input class="userName" type="text"
												   name="username"  style="text-align:center" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>密码</label></td>
										<td><input class="jobNum" type="text"
												   name="password" style="text-align:center"  /></td>

									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>手机号码</label></td>
										<td><input type="text" name="phone" style="text-align:center" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>邮箱</label></td>
										<td><input type="text" name="email" style="text-align:center" /></td>
									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>身份证号码</label></td>
										<td><input type="text" name="idcard" style="text-align:center" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>注册日期</label></td>
										<td><input type="text" name="pdate1" style="text-align:center" placeholder="yyyy/MM/dd HH:mm:ss" /></td>
									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
										style="font-size: 14px; color: red;">*</font>余额</label></td>
										<td><input type="text" name="money" style="text-align:center" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>登录时间</label></td>
										<td><input type="text" name="lastdate1" style="text-align:center" placeholder="yyyy/MM/dd HH:mm:ss" /></td>
									</tr>
									</tbody>
								</table>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary"
											data-dismiss="modal">取消</button>
									<button id="ad_btn" type="submit" class="btn btn-secondary" >确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--表格列表-->
		<table id="tb" class="table">
			<thead>
			<tr>
				<th>用户名</th>
				<th>密码</th>
				<th>手机号码</th>
				<th>邮箱</th>
				<th>身份证号码</th>
				<th>注册时间</th>
				<th>登录时间</th>
				<th>余额</th>
				<th>权限角色</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="show_tbody">
			<c:forEach items="${users}" var="o">
				<%--<fmt:formatDate value="${operationtime}" pattern="yyyy-MM-dd HH:mm:ss" />--%>
				<tr>
					<td>${o.username }</td>
					<td>${o.password }</td>
					<td>${o.phone }</td>
					<td>${o.email }</td>
					<td>${o.idcard }</td>
					<td><fmt:formatDate value="${o.pdate }" pattern="yyyy/MM/dd HH:mm:ss" /></td>
					<td><fmt:formatDate value="${o.lastdate }" pattern="yyyy/MM/dd HH:mm:ss" /></td>
					<td>${o.money }</td>
					<td>${o.role.rolename }</td>
					<td><div class="edit2">
						<span id ="edit1" class="edit1" data-toggle="modal" data-target="#renyuan1" style="color:#479eff;cursor: pointer;" onclick="doUserModify(${o.userid})">编辑</span>
						<div class="modal fade" id="renyuan1">
							<div class="modal-dialog modal-lg modal_position">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title">编辑</h4>
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>
									<form id="form2" name="form2" action="/user/updateUser2" method="post" enctype="application/x-www-form-urlencoded">
										<div class="modal-body">
											<input type="text" name="userid" id="userid" value="${o.userid }" hidden/>
											<table id="xztb" class="table" >
												<tbody>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>用户名</label></td>
													<td><input class="userName" type="text"
															   name="username" id="username" style="text-align:center"/></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>密码</label></td>
													<td><input class="jobNum" type="text"
															   name="password" id="password" style="text-align:center"/></td>

												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>手机号码</label></td>
													<td><input type="text" name="phone" id="phone" style="text-align:center"/></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>邮箱</label></td>
													<td><input type="text" name="email" id="email" style="text-align:center"/></td>
												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>身份证号码</label></td>
													<td><input type="text" name="idcard" id="idcard" style="text-align:center"/></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>注册日期</label></td>
													<td><input type="text" name="pdate1" id="pdate" style="text-align:center"/></td>
												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>余额</label></td>
													<td><input type="text" name="money" id="money"style="text-align:center" /></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>登录时间</label></td>
													<td><input type="text" name="lastdate1" id="lastdate" style="text-align:center" /></td>
												</tr>
												</tbody>
											</table>
											<div class="modal-footer">
												<button type="button" class="btn btn-secondary"
														data-dismiss="modal" style="background: white">取消</button>
												<button id="ad_btn" type="submit" class="btn btn-secondary" >确定</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div><a onclick="doUserDelete(${o.userid})" class="del" style="cursor: pointer">删除</a>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		<table width="100%" border="0" align="center" cellpadding="0"
			   cellspacing="0" class="page">
			<tr>
				<td width="50%" align="left">共有&nbsp;${count.count }&nbsp;条记录，<span
						style="font-family: 楷体; font-size: 15px; color: black">第</span><span
						style="font-family: 楷体; font-size: 15px; color: black">
						${ipageNum }/${total } </span><span
						style="font-family: 楷体; font-size: 15px; color: black;">页</span></td>
				<td width="50%" align="right"><a href="/user/queryByNamePhone?pageNum=1&username=${param.username}&phone=${param.phone}">首页</a>
					<a href="/user/queryByNamePhone?pageNum=${ipageNum - 1<1?1:ipageNum - 1}&username=${param.username}&phone=${param.phone}">上一页</a>
					<a
							href="/user/queryByNamePhone?pageNum=${ipageNum + 1>total?total:ipageNum + 1}&username=${param.username}&phone=${param.phone}">下一页</a>
					<a href="/user/queryByNamePhone?pageNum=${total }&username=${param.username}&phone=${param.phone}">末页&nbsp;</a>&nbsp;跳转到 <select
							name="select2" onchange="changePage(this)">
						<c:forEach begin="1" end="${total }" step="1" var="i">
							<option value="${i }" ${i==ipageNum?"selected":"" }>${i
									}</option>
						</c:forEach>
					</select></td>
			</tr>
		</table>
		<script>
			// 					function toPage(i){

			// 					}
			function changePage(th) {
<%--					alert(th.value+"&word=${param.word}");--%>
				window.location="/user/queryByNamePhone?pageNum="+th.value+"&username=${param.username}&phone=${param.phone}";
			}

		</script>

		<script>
			function onSelectByNamePhone() {
// 				var Ktext = document.getElementById("Ktext").value;
// 							alert(Ktext);
// 				window.location="UserSelectByName.do?word="+Ktext;
				var username = $("#Ktext").val();
				var phone = $("#Ktext2").val();
				// alert(username);
				// alert(phone);
				window.location="/user/queryByNamePhone?username="+username+"&phone="+phone;

			}
		</script>
		<script>
			function doUserModify(id) {
				// alert(id)
				var data = {
					"userid": id,
				}
				$.ajax({
					type: "post",
					url: "/user/updateUser",
					data: JSON.stringify(data),
					success: function (people) {
						// alert(people.userid);
						$("#userid").val(people.userid);
						$("#username").val(people.username);
						$("#password").val(people.password);
						$("#phone").val(people.phone);
						<%--<fmt:formatDate value="${operationtime}" pattern="yyyy-MM-dd HH:mm:ss" />--%>
						$("#pdate").val(people.pdate);
						$("#lastdate").val(people.lastdate);
						$("#email").val(people.email);
						$("#money").val(people.money);
						$("#idcard").val(people.idcard);
						$("#roleid").val(people.roleid);

					},
					dataType: "json",
					contentType: "application/json"
				})
			}
		</script>

		<script>
			function doUserDelete(uid) {
				// alert(uid)
				var data = {
					"userid": uid,
				}
				$.ajax({
					type: "post",
					url: "/user/deleteUser",
					data: JSON.stringify(data),
					dataType: "json",
					contentType: "application/json"
				})
			}
		</script>
	</div>
</div>

<script src="/static/js/mejs1.js"></script>
</body>
</html>
